<template>
  <div class="order-details2">
    <navBar :title="headerTitle"></navBar>
    <div class="main">
      <div class="adress" @click="chooseAddr">
        <div class="adress-left">
          <span class="adress-icon">
            <img src="/img/11.png" alt />
          </span>
          <span class="adress-tip">{{address?address.address:"请选择收货地址"}}</span>
        </div>
        <div class="adress-right">
          <span class="adress-icon">
            <img src="/img/44.png" alt />
          </span>
        </div>
      </div>
      <div class="line"></div>
      <div class="order-card">
        <div class="card-infor">
          <div class="product-infor">
            <div class="product-img" :style="'background-image:url('+info.image+');    background-size: 100%;'"></div>
            <div class="product-message">
              <div class="product-title">{{info.name}}</div>
              <div class="product-size pad-t5">
                <span>面额:</span>
                <span class="pad-l5">{{info.amount}}</span>
              </div>
              <!-- <div class="product-size pad-t5">
                <span>规格:</span>
                <span class="pad-l5">元/张</span>
              </div> -->
              <div class="product-infor-price pad-t5">
                <span>单价:</span>
                <span class="pad-l5">￥{{info.price}}/张</span>
              </div>
              <div class="product-count pad-t5">
                <span>数量:</span>
                <span class="pad-l5">1张</span>
              </div>
            </div>
          </div>
          <div class="card-price">
            <span>￥{{info.price}}</span>
          </div>
        </div>
        <div class="btns">
          <div class="btns-left">
            <span>购买数量</span>
          </div>
          <div class="btns-right">
            <span class="btn-icon">
              <img src="/img/38.png" @click="reduct()" alt />
            </span>
            <span class="btn-num">{{buyCount}}</span>
            <span class="btn-icon">
              <img src="/img/30.png" @click="add()" alt />
            </span>
          </div>
        </div>
        <div class="count">
          <span>合计:</span>
          <span class="count-num">￥{{payMoeny}}</span>
        </div>
      </div>
    </div>
    <div class="submit">
      <div class="submit-num">
        <span class="submit-text">实付款:</span>
        <span class="submit-price pad-l5">￥{{payMoeny}}</span>
      </div>
      <div class="submit-btn" @click="goToPaying">
        <span>立即支付</span>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import { Toast } from "vant";
import { mapActions } from "vuex";
Vue.use(Toast);
export default {
  data() {
    return {
      headerTitle: "礼品卡订单",
      buyList: [],
      buyCount: 1,
      payMoeny: 0,
      info: [],
    };
  },
  computed: {
    address(){
      return this.$store.state.selected_address || undefined
    },
    address_id(){
      return this.address ? this.address.address_id : 0
    },
    goods_id(){
      return this.$route.query.card_id
    },
    card_id(){
      return this.$route.query.card_id
    }
  },
  watch:{
    card_id(){
      this.getDetail()
    }
  },
  components: { navBar },
  mounted(){
    this.getDetail();
  },
  methods: {
    ...mapActions(["giftCardDetail"]),
    getDetail(){
      console.log('card_id',this.card_id);
      this.giftCardDetail({
        id:this.card_id
      }).then(res=>{
        console.log('[giftCardDetail]', res);
        if(res.data.status == 1){
          this.info = res.data.result
          this.payMoeny = this.buyCount*this.info.price
        }
      }).catch(res=>{

      })
    },
    goToPaying() {
      if(this.address_id <= 0 || this.address_id == undefined){
        Toast("请选择收货地址！");
        return;
      }
      this.$store.dispatch('buyGift',{
        goods_id: this.goods_id,
        goods_num: this.buyCount,
        item_id:0,
        address_id: this.address_id,
        user_money: 0,
        invoice_title:'',
        taxpayer:'',
        invoice_desc:'',
        user_note:''
      }).then(res=>{
        console.log('[buyGift]',res);
        if(res.data.status == 1){
          this.$router.push({ name: 'paying', query:{order_id:res.data.result.order_id}})
        }
      }).catch(res=>{

      })

    },
    reduct(){
      if(this.buyCount > 1){
        this.buyCount--;
        this.payMoeny = this.buyCount*this.info.price
      }
    },
    add(){
      this.buyCount++;
      this.payMoeny = this.buyCount*this.info.price
    },
    chooseAddr(){
      this.$router.push({ name: "myAddressManagement", query: { from: 'order_detail2',card_id: this.card_id }});
    }
  }
};
</script>

<style lang="less" scope>
* {
  padding: 0;
  margin: 0;
}
.pad-t5 {
  padding-top: 5px;
}
.pad-l5 {
  padding-left: 5px;
}
.order-details2 {
  height: 100%;
  width: 100%;
  padding-top: 50px;
  background: rgba(247, 247, 247, 1);
  .main {
    .adress {
      display: flex;
      justify-content: space-between;
      padding: 0 16px;
      height: 48px;
      line-height: 48px;
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);

      .adress-icon {
        height: 22px;
        width: 22px;
        img {
          height: 22px;
          width: 22px;
          vertical-align: middle;
        }
      }
      .adress-left {
        .adress-tip {
          padding-left: 7px;
          line-height: 50px;
        }
      }
    }
    .line {
      height: 2px;
      width: 100%;
      background: url(/img/35.png) repeat center center;
      background-size: 100%;
    }
    .order-card {
      position: relative;
      padding: 11px;
      margin-top: 9px;
      height: 215px;
      box-sizing: border-box;
      background-color: #fff;
      .card-infor {
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        padding: 11px;
        box-sizing: border-box;
        width: 354px;
        // height: 112px;
        background: rgba(247, 247, 247, 1);
        border-radius: 12px;
        .card-price {
          // width: 34px;
          height: 18px;
          font-size: 13px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(225, 52, 52, 1);
          line-height: 18px;
        }
        .product-infor {
          display: flex;
          .product-img {
            margin-right: 8px;
            width: 64px;
            height: 64px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
          }
          .product-message {
            width: 141px;
            height: 100px;
            font-size: 9px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 13px;

            .product-title {
              width: 141px;
              height: 36px;
              font-size: 13px;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              color: rgba(48, 48, 48, 1);
              line-height: 18px;
            }
          }
        }
      }
      .btns {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 138px;
        width: 100%;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        .btns-right {
          position: absolute;
          right: 21px;
          .btn-icon {
            height: 17px;
            width: 17px;
            img {
              height: 17px;
              width: 17px;
              vertical-align: middle;
            }
          }
          .btn-num {
            font-size: 13px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(48, 48, 48, 1);
            padding: 0px 8px;
          }
        }
      }
      .count {
        position: absolute;
        bottom: 25px;
        right: 11px;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        .count-num {
          padding-left: 10px;
          color: rgba(225, 52, 52, 1);
        }
      }
    }
  }
  .submit {
    display: flex;
    position: fixed;
    bottom: 0;
    height: 41px;
    width: 100%;
    background-color: #fff;
    .submit-num {
      padding: 11px 0px 0px 15px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);
      .submit-price {
        color: rgba(225, 52, 52, 1);
      }
    }
    .submit-btn {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      right: 0;
      width: 149px;
      height: 41px;
      background: linear-gradient(
        90deg,
        rgba(1, 47, 64, 1) 0%,
        rgba(1, 47, 64, 1) 100%
      );
      span {
        font-size: 15px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
